<template>
  <div class="driverAudit">
    <div>
      <!-- 详情内容 -->
      <div class="details-content">
        <!-- 行驶证正面 -->
        <div style="display: flex;flex-wrap: nowrap;height: 300px;">
          <!-- 行驶证正面 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">行驶证正面</div>
            <div style="width: 93%;margin: 0 auto;">
              <el-upload
                action=""
                :before-upload="beforeAvatarListUpload"
                list-type="picture-card"
                :on-remove="handleListRemove"
                :file-list="licenseFirstImg"
                :on-exceed="exceed"
                :limit="limitNum"
                :class="{hide:frontImgEdit}"
              />
            </div>

          </div>
          <!-- 行驶证正面 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form
                ref="form"
                :model="detailsFrontForm"
                :rules="detailsFrontRules"
                label-width="120px"
              >
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车牌号：" prop="licenseNo">
                      <el-input v-model="detailsFrontForm.licenseNo" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="使用性质：" prop="useNature">
                      <el-input v-model="detailsFrontForm.useNature" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车牌颜色：" prop="licenseColour">
                      <el-input v-model="detailsFrontForm.licenseColour" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆所有人：" prop="owner">
                      <el-input v-model="detailsFrontForm.owner" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="行驶证住址：" prop="licenseAddress">
                      <el-input v-model="detailsFrontForm.licenseAddress" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆识别代码：">
                      <el-input v-model="detailsFrontForm.identificationCode" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="发证机关：">
                      <el-input v-model="detailsFrontForm.licenceIssuingAuthority" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆类型全称：">
                      <el-input v-model="detailsFrontForm.typeFullName" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="注册日期：">
                      <el-date-picker
                        v-model="detailsFrontForm.licenceRegisterTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发证日期：">
                      <el-date-picker
                        v-model="detailsFrontForm.certificateTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 行驶证背面 -->
        <div style="display: flex;flex-wrap: nowrap;height: 230px;">
          <!-- 行驶证背面 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">行驶证背面</div>
            <div style="width: 93%;margin: 0 auto;">
              <el-upload
                action=""
                :before-upload="licenseSecondUpload"
                list-type="picture-card"
                :on-remove="licenseSecondRemove"
                :file-list="licenseSecondImg"
                :on-exceed="exceed"
                :class="{hide:backImgEdit}"
                :limit="limitNum"
              />
            </div>
          </div>
          <!-- 行驶证背面 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form ref="form" :model="detailsBackForm" :rules="detailsBackRules" label-width="120px">
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="额定载重：" prop="ratedLoad">
                      <el-input v-model="detailsBackForm.ratedLoad" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="车辆载重：" prop="weight">
                      <el-input v-model="detailsBackForm.weight" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="强制报废期：" prop="mandatoryScrappingTime">
                      <el-date-picker
                        v-model="detailsFrontForm.mandatoryScrappingTime"
                        type="date"
                        style="width: 100%;"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="档案编号：" prop="fileNo">
                      <el-input v-model="detailsBackForm.fileNo" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="12">
                    <el-form-item label="车辆能源类型：">
                      <el-select v-model="detailsBackForm.energyTypeId" style="width:100%;" placeholder="车辆能源类型">
                        <el-option
                          v-for="item in energyTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 道路运输证 -->
        <div style="display: flex;flex-wrap: nowrap;height: 260px;">
          <!-- 道路运输证 左侧-->
          <div class="driving-license-left">
            <div class="driving-license-title">道路运输证</div>
            <div style="width: 93%;margin: 0 auto;">
              <el-upload
                action=""
                :before-upload="transportLicenseUpload"
                list-type="picture-card"
                :on-remove="transportLicenseRemove"
                :file-list="transportLicenseImg"
                :on-exceed="exceed"
                :limit="limitNum"
                :class="{hide:drivingLicenseImgEdit}"
              />
            </div>
          </div>
          <!-- 道路运输证 右侧-->
          <div class="driving-license-right">
            <div style="margin: 20px;">
              <el-form
                ref="form"
                :model="roadTransportFrom"
                :rules="roadTransportRules"
                label-width="140px"
              >
                <el-form-item label="道路运输证编号：" style="width: 54%;" prop="transportLicenseNo">
                  <el-input v-model="roadTransportFrom.transportLicenseNo" />
                </el-form-item>
                <el-form-item label="有效期起：" prop="transportLicenseStartTime">
                  <!-- <el-input v-model="roadTransportFrom.transportLicenseStartTime" /> -->
                  <el-date-picker
                    v-model="roadTransportFrom.transportLicenseStartTime"
                    style="width: 45%;"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="有效期至：" prop="transportLicenseEndTime">
                  <!-- <el-input v-model="roadTransportFrom.transportLicenseEndTime" /> -->
                  <el-date-picker
                    v-model="roadTransportFrom.transportLicenseEndTime"
                    type="date"
                    style="width: 45%;"
                    placeholder="选择日期"
                  />
                </el-form-item>
                <el-form-item label="是否有效：" prop="transportLicenseStatus">
                  <!-- <el-input v-model="roadTransportFrom.transportLicenseStatus"></el-input> -->
                  <el-radio v-model="roadTransportFrom.transportLicenseStatus" label="ACTIVE">有效</el-radio>
                  <el-radio v-model="roadTransportFrom.transportLicenseStatus" label="INVALID">过期</el-radio>
                  <el-radio v-model="roadTransportFrom.transportLicenseStatus" label="READY INVALID">即将过期</el-radio>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 操作日志 -->
        <div style="height: 260px;">
          <!-- 操作日志 -->
          <div>
            <div class="driving-license-title">操作日志</div>
            <!-- 审核按钮 -->
            <div class="audit-btn">
              <el-button type="warning" @click="auditPass">审核通过</el-button>
              <el-button type="info" @click="auditNoPass">审核不通过</el-button>
            </div>
          </div>
          <div style="margin: 20px;">
            <el-table
              ref="tableKey"
              v-loading="listLoading"
              :data="list"
              highlight-current-row
              style="width: 100%"
              @current-change="handleCurrentChange"
            >
              <el-table-column type="index" width="50" />
              <el-table-column property="status" label="状态" width="120" />
              <el-table-column property="name" label="操作人" width="120" />
              <el-table-column property="lastUpdateTime" label="操作时间" />
              <el-table-column property="remark" label="备注" />
            </el-table>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="showDialog = false">确 定</el-button>
      </span>
    </div>
    <el-dialog :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">
      <img width="100%" :src="dialogImageUrl" alt="图片未找到">
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import { fileUpload, fileDestroy } from '@/api/common/file'
import { auditTransit, energyType } from '@/api/tms/car'
export default {
  // 接受父组件传递的值
  props: {
    auditVisible: {
      type: Boolean,
      default: false
    },
    auditRowDataArray: {
      type: Array,
      default: function() {
        return []
      }
    },
    auditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  // props: ['auditVisible', 'auditRowDataArray', 'auditRowData'],
  data() {
    return {
      transportLicenseImg: [],
      licenseSecondImg: [],
      licenseFirstImg: [],
      // 是否显示预览图片
      imgVisible: false,
      // 预览图片url
      dialogImageUrl: '',
      list: [],
      tableKey: 0,
      listLoading: true,
      // 控制弹出框显示隐藏
      showDialog: false,
      roadTransportFrom: {
        transportLicenseNo: '',
        transportLicenseStartTime: '',
        transportLicenseEndTime: '',
        transportLicenseStatus: ''
      },
      roadTransportRules: {
        transportLicenseNo: [{ required: true, message: '请填写道路运输证编号', trigger: 'blur' }],
        transportLicenseStartTime: [{ required: true, message: '请选择有效期起', trigger: 'blur' }],
        transportLicenseEndTime: [{ required: true, message: '请选择有效期至', trigger: 'blur' }]
      },
      detailsFrontForm: {
        licenseNo: '',
        useNature: '',
        licenseColour: '',
        owner: '',
        licenseAddress: '',
        identificationCode: '',
        licenceIssuingAuthority: '',
        typeFullName: '',
        licenceRegisterTime: '',
        certificateTime: ''
      },
      detailsFrontRules: {
        licenseNo: [{ required: true, message: '请填写车牌号', trigger: 'blur' }],
        useNature: [{ required: true, message: '请填写使用性质', trigger: 'blur' }],
        licenseColour: [{ required: true, message: '请填写车牌颜色', trigger: 'blur' }],
        owner: [{ required: true, message: '请填写车辆所有人', trigger: 'blur' }],
        licenseAddress: [{ required: true, message: '请填写行驶证住址', trigger: 'blur' }]
      },
      detailsBackForm: {
        ratedLoad: '',
        weight: '',
        mandatoryScrappingTime: '',
        fileNo: '',
        energyTypeId: ''
      },
      detailsBackRules: {
        ratedLoad: [{ required: true, message: '请填写额定载重', trigger: 'blur' }],
        mandatoryScrappingTime: [{ required: true, message: '请选择强制报废期', trigger: 'blur' }]
      },
      frontImgEdit: false,
      backImgEdit: false,
      drivingLicenseImgEdit: false,
      limitNum: 1, // 图片数量
      ids: [],
      licenseSecondId: [],
      transportLicenseId: [],
      id: '', // 车辆ID
      energyTypeList: [],
      remark: ''// 审核不通过原因
    }
  },
  watch: {
  },
  created() {
    console.log('页面加载获取车辆详情', this.auditRowData)
    console.log('日志查询', this.auditRowDataArray)
    this.showDialog = this.auditVisible
    this.getEnergyType()
    this.list = this.auditRowDataArray
    this.id = this.auditRowData.id
    const transportLicense = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + this.auditRowData.transportLicenseImg
    this.transportLicenseImg.push({
      url: transportLicense,
      status: 'transportLicenseImg'
    })
    const licenseSecond = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + this.auditRowData.licenseSecondImg
    this.licenseSecondImg.push({
      url: licenseSecond,
      status: 'licenseSecondImg'
    })
    const licenseFirst = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + this.auditRowData.licenseFirstImg
    this.licenseFirstImg.push({
      url: licenseFirst,
      status: 'licenseFirstImg'
    })
    if (this.licenseFirstImg.length === 1 && this.licenseSecondImg.length === 1 && this.transportLicenseImg.length === 1) {
      this.frontImgEdit = true
      this.drivingLicenseImgEdit = true
      this.backImgEdit = true
      this.ids = [this.auditRowData.licenseFirstImg]
      this.licenseSecondId = [this.auditRowData.licenseSecondImg]
      this.transportLicenseId = [this.auditRowData.transportLicenseImg]
    } else {
      this.frontImgEdit = false
      this.drivingLicenseImgEdit = false
      this.backImgEdit = false
      this.ids = []
      this.licenseSecondId = []
      this.transportLicenseId = []
    }
    this.detailsFrontForm = {
      licenseNo: this.auditRowData.licenseNo,
      useNature: this.auditRowData.useNature,
      licenseColour: this.auditRowData.licenseColour,
      owner: this.auditRowData.owner,
      licenseAddress: this.auditRowData.licenseAddress,
      identificationCode: this.auditRowData.identificationCode,
      licenceIssuingAuthority: this.auditRowData.licenceIssuingAuthority,
      typeFullName: this.auditRowData.typeFullName,
      licenceRegisterTime: this.auditRowData.licenceRegisterTime,
      certificateTime: this.auditRowData.certificateTime
    }
    this.detailsBackForm = {
      ratedLoad: this.auditRowData.ratedLoad,
      weight: this.auditRowData.weight,
      mandatoryScrappingTime: this.auditRowData.mandatoryScrappingTime,
      fileNo: this.auditRowData.fileNo,
      energyTypeId: this.auditRowData.energyTypeId
    }
    this.roadTransportFrom = {
      transportLicenseNo: this.auditRowData.transportLicenseNo,
      transportLicenseStartTime: this.auditRowData.transportLicenseStartTime,
      transportLicenseEndTime: this.auditRowData.transportLicenseEndTime,
      transportLicenseStatus: this.auditRowData.transportLicenseStatus
    }
  },
  methods: {
    getEnergyType() {
      energyType().then((response) => {
        console.log('能源类型', response)
        this.energyTypeList = response
      })
    },
    // 道路运输证
    transportLicenseRemove(file, fileList) {
      const data = {
        ids: this.transportLicenseId
      }
      fileDestroy(data).then((response) => {
        console.log('删除图片', response)
        this.transportLicenseImg = []
        this.drivingLicenseImgEdit = false
        this.$message.error('删除成功')
      })
    },
    // 道路运输证
    transportLicenseUpload(file) {
      console.log('上传运输证图片', file)
      const formData = new FormData()
      formData.append('file', file)
      formData.append('usage', 'transportLicenseImg')
      fileUpload(formData).then((response) => {
        var url = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + response
        this.transportLicenseImg.push({
          url: url,
          status: 'transportLicenseImg',
          id: response
        })
        this.transportLicenseId.push(response)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.drivingLicenseImgEdit = true
        console.log('上传图片', this.transportLicenseImg)
      })
      return false
    },
    // 行驶证背面
    licenseSecondUpload(file) {
      console.log('上传背面', file)
      const formData = new FormData()
      formData.append('file', file)
      formData.append('usage', 'licenseSecondImg')
      fileUpload(formData).then((response) => {
        var url = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + response
        this.licenseSecondImg.push({
          url: url,
          status: 'licenseSecondImg',
          id: response
        })
        this.licenseSecondId.push(response)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.backImgEdit = true
        console.log('上传图片', this.licenseSecondImg)
      })
      return false
    },
    // 行驶证背面
    licenseSecondRemove(file, fileList) {
      const data = {
        ids: this.licenseSecondId
      }
      fileDestroy(data).then((response) => {
        console.log('删除图片', response)
        this.licenseSecondImg = []
        this.backImgEdit = false
        this.$message.error('删除成功')
      })
    },
    // 行驶证正面上传前
    beforeAvatarListUpload(file) {
      console.log('上传正面', file)
      this.isMax = true
      const formData = new FormData()
      formData.append('file', file)
      formData.append('usage', 'licenseFirstImg')
      fileUpload(formData).then((response) => {
        var url = process.env.VUE_APP_TMS_BOOTSTRAP_HOST + '/api/v1/common-file/download?id=' + response
        this.licenseFirstImg.push({
          url: url,
          status: 'licenseFirstImg',
          id: response
        })
        this.ids.push(response)
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.frontImgEdit = true
        console.log('上传图片', this.licenseFirstImg)
      })
      return false
    },
    // 行驶证正面 删除图片
    handleListRemove(file, fileList) {
      const data = {
        ids: this.ids
      }
      fileDestroy(data).then((response) => {
        console.log('删除图片', response)
        this.licenseFirstImg = []
        this.frontImgEdit = false
        this.$message.error('删除成功')
      })
    },
    exceed() {
      this.$message.error('最多只能上传1张图片')
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit('changeShow', 'false')
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    auditState() {
      const data = {
        auditInfo: 'SUCCESS',
        id: this.id,
        licenseFirstImg: this.licenseFirstImg[0].id,
        licenseNo: this.detailsFrontForm.licenseNo,
        useNature: this.detailsFrontForm.useNature,
        licenseColour: this.detailsFrontForm.licenseColour,
        owner: this.detailsFrontForm.owner,
        licenseAddress: this.detailsFrontForm.licenseAddress,
        identificationCode: this.detailsFrontForm.identificationCode,
        licenceIssuingAuthority: this.detailsFrontForm.licenceIssuingAuthority,
        typeFullName: this.detailsFrontForm.typeFullName,
        licenceRegisterTime: parseTime(this.detailsFrontForm.licenceRegisterTime),
        certificateTime: parseTime(this.detailsFrontForm.certificateTime),
        licenseSecondImg: this.licenseSecondImg[0].id,
        ratedLoad: this.detailsBackForm.ratedLoad,
        totalMass: this.detailsBackForm.totalMass,
        mandatoryScrappingTime: parseTime(this.detailsBackForm.mandatoryScrappingTime),
        fileNo: this.detailsBackForm.fileNo,
        energyTypeId: this.detailsBackForm.energyTypeId,
        transportLicenseNo: this.roadTransportFrom.transportLicenseNo,
        transportLicenseImg: this.transportLicenseImg[0].id,
        transportLicenseStartTime: parseTime(this.roadTransportFrom.transportLicenseStartTime),
        transportLicenseEndTime: parseTime(this.roadTransportFrom.transportLicenseEndTime),
        transportLicenseStatus: this.roadTransportFrom.transportLicenseStatus,
        remark: this.remark,
        licenseFirstStatus: this.auditRowData.licenseFirstStatus,
        licenseSecondStatus: this.auditRowData.licenseSecondStatus,
        transportLicenseCheckStatus: this.auditRowData.transportLicenseCheckStatus
      }
      console.log('审核通过入参', data)
      auditTransit(data).then((response) => {
        console.log('审核通过成功', response)
      })
    },
    // 审核通过
    auditPass() {
      this.$confirm('是否确认审核通过?', '提示', {
        title: '审核通过',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.auditState()
        this.$message({
          type: 'success',
          message: '审核成功!'
        })
        this.handleClose()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        })
      })
    },
    // 审核不通过
    auditNoPass() {
      this.$prompt('不通过原因', '提示', {
        title: '审核不通过',
        inputPlaceholder: '请输入不通过理由',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '输入不能为空',
        inputValidator: (value) => {
          if (!value) {
            return '输入不能为空'
          }
        } }).then((value) => {
        this.$message({
          type: 'success',
          message: '审核不通过!'
        })
        this.auditState()
        this.remark = value.value
        this.handleClose()
        console.log('tttt', this.remark)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消不通过'
        })
      })
    }
  }

}
</script>
<style lang="scss">
.driverAudit{
    padding: 30px 0;
    .hide .el-upload--picture-card {
        display: none;
      }
    .details-content {
        border: 1px solid #E4E4E4;
        width: 95%;
        margin: 0 auto;
        height: 1150px;
    }

    .driving-license-left {
        border-bottom: 1px solid #E4E4E4;
        border-right: 1px solid #E4E4E4;
        width: 35%;
    }

    .driving-license-title {
        border-left: 2px solid #FFB500;
        width: 100px;
        text-align: center;
        font-size: 16px;
        margin: 20px;
    }

    .driving-license-right {
        border-bottom: 1px solid #E4E4E4;
        width: 65%;
        /* margin: 20px; */
    }
    .audit-btn{
        text-align: center;
        padding: 20px;
    }
    .dialog-footer{
      margin-top: 30px;

    }
}
</style>
